<template>
	<div>
		<el-card>
			<el-row
				:gutter="20"
				style="
					padding-bottom: 16px;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				"
			>
				<el-col :span="7">
					<el-input
						placeholder="输入题目编号以查询"
						v-model="qustionIdForSearch"
						style="height: 34px"
					></el-input>
				</el-col>
				<el-button
					type="primary"
					:icon="Search"
					@click="searchById(qustionIdForSearch)"
				>
					搜索
				</el-button>
				<el-button type="primary" @click="addQuestion">
					添加题目
				</el-button>
			</el-row>

			<el-table
				:data="tableData"
				stripe
				style="width: 100%"
				@form-submitted="handleFormSubmit"
			>
				<el-table-column
					v-for="(item, index) in options"
					:key="index"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
				>
					<template
						v-if="item.prop == 'actions'"
						#default="{ row }"
					>
						<el-button
							type="primary"
							size="small"
							@click="updateQuestion(row)"
						>
							修改信息
						</el-button>
						<el-button
							type="warning"
							size="small"
							@click="deleteQuestion(row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				v-model:current-page="queryForm.pageNum"
				v-model:page-size="queryForm.pageSize"
				:page-sizes="[2, 5, 10, 15]"
				layout="sizes, prev, pager, next"
				:total="1000"
			/>
		</el-card>
		<addQstionDialogue v-model="addDialogVisible"></addQstionDialogue>
		<updateQstionDialogue
			v-model="updateDialogVisible"
		></updateQstionDialogue>
	</div>
</template>

<script setup lang="ts">
import addQstionDialogue from '@/components/dialogue/addQstionDialogue.vue'
import updateQstionDialogue from '@/components/dialogue/updateQstionDialogue.vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { options } from './options'
import { ref, Ref } from 'vue'
import {
	type Question,
	getLeveQuestionBankById
} from '@/api/test/wirttenTest'
import { createLeveQuestionBank } from '@/api/test/wirttenTest'
import $bus from '@/bus'

import {
	getAllQuestions,
	deleteLeveQuestionBank
} from '@/api/test/wirttenTest'

const qustionIdForSearch = ref('')
const addDialogVisible = ref(false)
const updateDialogVisible = ref(false)
const queryForm = ref({
	pageNum: 1,
	pageSize: 10
})
const tableData: Ref<Question[]> = ref([])
const initQuestionList = async (PageNum: number, PageSize: number) => {
	const res = await getAllQuestions(PageNum, PageSize)
	tableData.value = res
}

initQuestionList(1, 200)

//添加题目
function addQuestion() {
	addDialogVisible.value = true
}

//查找题目
const searchById = async (_id: string) => {
	if (_id) {
		const res = await getLeveQuestionBankById(_id)
		if (res != '') {
			tableData.value = []
			tableData.value.push(res)
		} else {
			ElMessage({
				message: '未找到该题目',
				type: 'warning'
			})
		}
	} else {
		initQuestionList(1, 200)
	}
}
//修改题目信息
const updateQuestion = (row: Question) => {
	updateDialogVisible.value = true
	$bus.emit('sendQuestionInfo', { row })
}

const handleFormSubmit =async (form: Question) => {
	const res =await createLeveQuestionBank(form)
	if (res!='') {
		ElMessage({
			message: '添加成功',
			type: 'success'
		})
		tableData.value.push(form)
	}
	else{
		ElMessage({
			message: '添加失败',
			type: 'warning'
		})
	}
	console.log(res)
}
// 删除题目
const deleteQuestion = (row: any) => {
	ElMessageBox.confirm('你确认要删除该信息吗?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		console.log(row.id)
		await deleteLeveQuestionBank(row.id)
		initQuestionList(1, 50)
		ElMessage({
			message: '删除成功',
			type: 'success'
		})
	})
}
</script>

<style scoped>
.header {
	margin-bottom: 20px;
	box-sizing: border-box;
}
</style>
